<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/css/zui.min.css">
</head>

<body>
  <div class="cards" style="padding: 10px; margin: 0;">
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="https://www.openzui.com/docs/img/img2.jpg" data-image="https://www.openzui.com/docs/img/img2.jpg" data-toggle="lightbox" data-caption="“良辰美景” 出自《牡丹亭》" data-group="image-group">
        <div class="caption">点击查看大图</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        <div class="card-actions">
          <span class="label label-warning">牡丹亭</span>
          <div class="pull-right"><i class="icon-comments-alt"></i> 520</div>
        </div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="https://www.openzui.com/docs/img/img1.jpg" data-image="https://www.openzui.com/docs/img/img1.jpg" data-toggle="lightbox" data-caption="“良辰美景” 出自《牡丹亭》" data-group="image-group">
        <div class="caption">点击查看大图</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        <div class="card-actions">
          <span class="label label-warning">牡丹亭</span>
          <div class="pull-right"><i class="icon-comments-alt"></i> 520</div>
        </div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="https://www.openzui.com/docs/img/img5.jpg" data-image="https://www.openzui.com/docs/img/img5.jpg" data-toggle="lightbox" data-caption="“良辰美景” 出自《牡丹亭》" data-group="image-group">
        <div class="caption">点击查看大图</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        <div class="card-actions">
          <span class="label label-warning">牡丹亭</span>
          <div class="pull-right"><i class="icon-comments-alt"></i> 520</div>
        </div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="https://www.openzui.com/docs/img/img4.jpg" data-image="https://www.openzui.com/docs/img/img4.jpg" data-toggle="lightbox" data-caption="“良辰美景” 出自《牡丹亭》" data-group="image-group">
        <div class="caption">点击查看大图</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        <div class="card-actions">
          <span class="label label-warning">牡丹亭</span>
          <div class="pull-right"><i class="icon-comments-alt"></i> 520</div>
        </div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="https://www.openzui.com/docs/img/img3.jpg" data-image="https://www.openzui.com/docs/img/img3.jpg" data-toggle="lightbox" data-caption="“良辰美景” 出自《牡丹亭》" data-group="image-group">
        <div class="caption">点击查看大图</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        <div class="card-actions">
          <button type="button" class="btn btn-danger"><i class="icon-heart"></i> 喜欢</button>
          <div class="pull-right text-danger"><i class="icon-heart-empty"></i> 520 人喜欢</div>
        </div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="https://www.openzui.com/docs/img/img2.jpg" data-image="https://www.openzui.com/docs/img/img2.jpg" data-toggle="lightbox" data-caption="“良辰美景” 出自《牡丹亭》" data-group="image-group">
        <div class="caption">点击查看大图</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        <div class="card-actions">
          <button type="button" class="btn btn-danger"><i class="icon-heart"></i> 喜欢</button>
          <div class="pull-right text-danger"><i class="icon-heart-empty"></i> 520 人喜欢</div>
        </div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="https://www.openzui.com/docs/img/img1.jpg" data-image="https://www.openzui.com/docs/img/img1.jpg" data-toggle="lightbox" data-caption="“良辰美景” 出自《牡丹亭》" data-group="image-group">
        <div class="caption">点击查看大图</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        <div class="card-actions">
          <button type="button" class="btn btn-danger"><i class="icon-heart"></i> 喜欢</button>
          <div class="pull-right text-danger"><i class="icon-heart-empty"></i> 520 人喜欢</div>
        </div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="https://www.openzui.com/docs/img/img5.jpg" data-image="https://www.openzui.com/docs/img/img5.jpg" data-toggle="lightbox" data-caption="“良辰美景” 出自《牡丹亭》" data-group="image-group">
        <div class="caption">点击查看大图</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        <div class="card-actions">
          <button type="button" class="btn btn-danger"><i class="icon-heart"></i> 喜欢</button>
          <div class="pull-right text-danger"><i class="icon-heart-empty"></i> 520 人喜欢</div>
        </div>
      </a>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/lib/jquery/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/js/zui.min.js"></script>
</body>

</html>
